<template>
    <div>
        <div class="userTable module-body">
            <el-table :data="userList" style="width: 100%" size="mini">
                <el-table-column prop="avatar" label="用户头像" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.avatar" alt="头像" class="avatar">
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="180">
                </el-table-column>
                <el-table-column prop="qq" label="qq号" width="180">
                </el-table-column>
                <el-table-column prop="weibo" label="微博号" width="180">
                </el-table-column>
                <el-table-column prop="github" label="账号" width="180">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="180">
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间">
                </el-table-column>
                <el-table-column prop="updated_at" label="更新时间">
                </el-table-column>
                <el-table-column prop="status" label="启用">
                    <template slot-scope="scope">
                        <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-row>
                            <el-button type="primary" icon="el-icon-edit" size='mini' circle ></el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
  name: 'userList',
  data() {
    return {
        userList:[
            {
                avatar: 'https://api.adorable.io/avatars/200/李玉庆',
                username: '李玉庆',
                qq: '536363636@qq.com',
                weibo: 'xxxxxxxxxx',
                github: 'xxxxxxxx',
                sex: '男',
                created_at: '2018-10-07',
                updated_at: '2018-10-08',
                status: true
            }
        ]
    };
  }
};
</script>

<style lang="scss" scoped>
    .avatar{
        width: 40px;
        border-radius: 20px;
    }
</style>


